<template>
    <div>
        <div v-if="!showBtn" style="display: flex;align-items: center;cursor: pointer;" @click="drawerFun">
            <el-avatar size="medium" :src="userInfos.avatar" style="margin-right: 10px"></el-avatar>
            <div style="font-size: 12px;"> {{ userInfos.name }} </div>
        </div>

        <el-button v-else size="mini" slot="reference" type="success" style="padding: 10px"
            @click="drawerFun">详情</el-button>

        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" :modal="modalShow" size="35%">
            <!-- <div style="display: flex;align-items: center;flex-direction: column;margin-top: 20px;">
            </div> -->
            <el-card>用户信息</el-card>
            <el-descriptions class="margin-top" title="" :column="2" size="mini" :border="true" style="text-align: center;">
                <el-descriptions-item style="text-align: center;">
                    <template slot="label">
                        昵称
                    </template>
                    <div class='flex align-center '>
                        <!-- <el-avatar :size="36" :src="userInfo.avatar" style="margin-right: 10px;text-align: center;"></el-avatar> -->
                        <el-image style="width: 36px; height: 36px;border-radius:36px" :src="userInfo.avatar"
                            :preview-src-list="[userInfo.avatar]"></el-image>
                        <div class="pl-10">
                            {{ userInfo.name }}
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item style="text-align: center;">
                    <template slot="label">
                        区号
                    </template>
                    {{ userInfo.country_code }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        手机号
                    </template>
                    {{ userInfo.mobile }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        性别
                    </template>
                    {{ userInfo.gender == 0 ? "未知" : userInfo.gender == 1 ? "男" : "女" }}
                    <!-- 0未知 1男 2女 -->
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        姓名
                    </template>
                    {{ userInfo.cert_name }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        身份证号码
                    </template>
                    {{ userInfo.cert_no }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        vip等级
                    </template>
                    {{ userInfo.vip_level }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        vip失效时间
                    </template>
                    {{ userInfo.vip_expire }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        密码
                    </template>
                    {{ userInfo.password }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        在线状态
                    </template>
                    {{ userInfo.online == 1 ? '在线' : '离线' }}
                </el-descriptions-item>

                <el-descriptions-item :span="1">
                    <template slot="label">
                        邀请码
                    </template>
                    {{ userInfo.invitation_code }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        父级用户
                    </template>
                    <div v-if="userInfo.parent_info">

                        <div class='flex align-center '>
                            <!-- <el-avatar :size="36" :src="userInfo.avatar" style="margin-right: 10px;text-align: center;"></el-avatar> -->
                            <el-image style="width: 36px; height: 36px;border-radius:36px"
                                :src="userInfo.parent_info.avatar"
                                :preview-src-list="[userInfo.parent_info.avatar]"></el-image>
                            <div class="pl-10">
                                {{ userInfo.parent_info.name }}
                            </div>
                        </div>
                    </div>
                    <div v-if="userInfo.parent_id == 0">无</div>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        可用余额
                    </template>
                    {{ userInfo.balance }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        提现余额
                    </template>
                    {{ userInfo.withdraw_balance }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        禁用状态
                    </template>
                    {{ userInfo.disable == 0 ? "正常" : "禁用" }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        资金密码
                    </template>
                    {{ userInfo.fun_password }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        青少年模式密码
                    </template>
                    {{ userInfo.teenager_password }}
                </el-descriptions-item>

                <!-- <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        背景地址
                    </template>
                    {{ userInfo.background}} 
                </el-descriptions-item> -->

                <el-descriptions-item>
                    <template slot="label">
                        是否主播
                    </template>
                    {{ userInfo.is_anchor == 0 ? "否" : "是" }}
                </el-descriptions-item>


                <el-descriptions-item>
                    <template slot="label">
                        个人简介
                    </template>
                    {{ userInfo.subtitle }}
                </el-descriptions-item>



                <el-descriptions-item>
                    <template slot="label">
                        所在城市
                    </template>
                    {{ userInfo.city }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        登录IP
                    </template>
                    {{ userInfo.login_ip }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        登录时间
                    </template>
                    {{ userInfo.login_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        登录地址
                    </template>
                    {{ userInfo.login_address }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        是否认证
                    </template>
                    {{ userInfo.authentication == 0 ? '否' : '是' }}
                </el-descriptions-item>



                <el-descriptions-item>
                    <template slot="label">
                        开启私人定制
                    </template>
                    {{ userInfo.customized == 0 ? "否" : "是" }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        注册IP
                    </template>
                    {{ userInfo.register_ip }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        注册地址
                    </template>
                    {{ userInfo.register_address }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        MAC地址
                    </template>
                    {{ userInfo.mac }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        设备型号
                    </template>
                    {{ userInfo.model }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        终端号码
                    </template>
                    {{ userInfo.terminal }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        创建时间
                    </template>
                    {{ userInfo.created_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        用户标签
                    </template>

                    <el-tag type="success" style="margin-right: 10px;" v-for="(item, index) in userInfo.labels"
                        :key="index">
                        {{ item }} </el-tag>

                </el-descriptions-item>

            </el-descriptions>

            <el-descriptions class="margin-top" title="" :column="3" size="mini" :border="true" style="text-align: center;margin-top: 10px;">
                <el-descriptions-item style="text-align: center;">
                    <template slot="label">
                        发布短视频
                    </template>
                    <div style="cursor: pointer;color: #409eff;" @click="toPath('/short-video-index?name=' + userInfo.name,userInfo.count ? userInfo.count.creation_count.short : 0)">
                        {{ userInfo.count ? userInfo.count.creation_count.short : 0}}
                    </div>
                </el-descriptions-item>
                <el-descriptions-item style="text-align: center;">
                    <template slot="label">
                        发布长视频
                    </template>
                    <div  style="cursor: pointer;color: #409eff;" @click="toPath('/long-video-list?name=' + userInfo.name,userInfo.count ? userInfo.count.creation_count.long : 0)">
                        {{ userInfo.count ?  userInfo.count.creation_count.long : 0 }}
                    </div>
                </el-descriptions-item>
                <el-descriptions-item style="text-align: center;">
                    <template slot="label">
                        发布帖子
                    </template>
                    <div  style="cursor: pointer;color: #409eff;" @click="toPath('/post-details-list?name=' + userInfo.name,userInfo.count ? userInfo.count.creation_count.infomation : 0)">
                        {{ userInfo.count ? userInfo.count.creation_count.infomation : 0}}
                    </div>
                </el-descriptions-item>
            </el-descriptions>

            <el-row>
                <el-col :span="12">

                    <div style="text-align: center;">
                        <h3>近30天消费统计图</h3>
                        <div v-if="!countMoney_count">
                            暂无数据
                        </div>
                        <div ref="money_count" style="width:100%;height:376px"></div>



                    </div>

                </el-col>
                <el-col :span="12">

                    <div style="text-align: center;">
                        <h3>密聊相关、订单的消费和收入</h3>
                        <div v-if="!countSecret_count">
                            暂无数据
                        </div>
                        <div ref="orderForm" style="width:100%;height:376px"></div>

                    </div>

                </el-col>
            </el-row>


        </el-drawer>


    </div>
</template>

<script>
export default {
    props: {
        modalShow: {
            default: true,
            type: Boolean,
        },
        user_id: {
            type: [String, Number],
        },
        showBtn: {
            default: false,
            type: Boolean
        },
        userInfos: {
            type: Object,
        }
    },

    data() {
        return {
            userInfo: {},
            drawer: false,
            countSecret_count: false,
            countMoney_count: false
        }
    },
    mounted() {
        // this.getUserInfo(this.user_id)
    },


    methods: {
        toPath(url,num) {
            if(!num){
              this.$message.warning('暂未发布作品')
              return
            }
            this.$router.push(url)
        },
        getUserInfo(id) {
            let that = this
            this.$request.get('/user/info/' + id).then((res) => {
                this.userInfo = res
                console.log('res===', res)

                const money_count = this.$refs.money_count
                if (money_count) {
                    const myMoney_count = this.$echarts.init(money_count)
                    const option = {
                        title: {
                            text: '',
                            subtext: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },

                        series: [
                            {
                                name: '数据统计',
                                type: 'pie',
                                radius: '50%',
                                data: [

                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]

                    }

                    for (let i = 0; i <= res.count.money_count.length; i++) {
                        option.series[0].data.push(res.count.money_count[i])
                    }

                    // let dateTwo
                    // for (let i = 0; i < res.withdraw_money_month.length; i++) {
                    //     console.log(res.withdraw_money_month[i].date)
                    //     //  date.push(parseInt(res.month_user_increase[i].date.substring(5,7)))
                    //     dateTwo = parseInt(res.withdraw_money_month[i].date.substring(8))
                    //     option.series[0].data[dateTwo] = res.withdraw_money_month[i].total
                    // }
                    myMoney_count.setOption(option)

                }
                //判断如果没有数据就显示暂无数据
                if (res.count.money_count.length == 0) {
                    that.countMoney_count = false
                } else {
                    that.countMoney_count = true
                }
                //判断如果没有数据就显示暂无数据
                if (res.count.secret_count.length == 0) {
                    that.countSecret_count = false
                } else {
                    that.countSecret_count = true
                }

                const orderForm = this.$refs.orderForm
                if (orderForm) {
                    const myOrderForm = this.$echarts.init(orderForm)
                    const option = {
                        title: {
                            text: '',
                            subtext: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },

                        series: [
                            {
                                name: '数据统计',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    // { name: '正数1', value: +10 },
                                    // { name: '正数2', value: +20 },
                                    // { name: '负数1', value: 100 },
                                    // { name: '负数2', value: -20 }
                                ],

                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]

                    }



                    //option.series[0].data = positiveData.concat(negativeData);
                    for (let i = 0; i <= res.count.secret_count.length; i++) {
                        option.series[0].data.push(res.count.secret_count[i])
                    }


                    // let dateTwo
                    // for (let i = 0; i < res.withdraw_money_month.length; i++) {
                    //     console.log(res.withdraw_money_month[i].date)
                    //     //  date.push(parseInt(res.month_user_increase[i].date.substring(5,7)))
                    //     dateTwo = parseInt(res.withdraw_money_month[i].date.substring(8))
                    //     option.series[0].data[dateTwo] = res.withdraw_money_month[i].total
                    // }
                    myOrderForm.setOption(option)
                }
            })
        },
        drawerFun() {
            this.getUserInfo(this.user_id)
            this.drawer = true
        }
    }

}
</script>

<style lang="scss" scoped>
/deep/.el-card__body {
    padding: 10px 30px !important;
}
</style>